@charset "utf-8"

$header_height: 0
$channels_width: 165px

html, body
  height: 100%

body
  background-color: $background
  font-size: 12px
  line-height: 16px
  color: $color0
  margin: 0
  padding: 0

section, header, pre
  display: block
  margin: 0

body, pre, input
  font-family: "Menlo", "Monaco", monospace

a
  color: $color0

input
  border: 1px solid $color3
  background-color: $input_color
  color: $color0
  outline: none
  height: 13px
  font-size: 12px
  padding-top: 2px
  margin: 0

  &[type="submit"]
    margin-top: 5px
    height: 18px
    align: center

  &[type="checkbox"]
    vertical-align: middle

.clear-input
  display: inline-block
  position: relative
  left: -22px
  top: 3px
  width: 12px
  height: 12px
  margin-right: -22px
  background: no-repeat url(/images/clear.png)
  &:hover
    background-position: -12px 0

.input-group
  display: inline
  border-left: 1px solid $color3
  padding-left: 0.5em

header
  background-color: $background
  height: $header_height
  line-height: $header_height
  position: fixed
  top: 0
  left: 0
  width: 100%
  text-align: center
  border-bottom: 1px solid $color3

  a
    text-decoration: none
    color: $color2

  span
    position: absolute
    left: 10px
    top: 0
    font-size: 18px

$button_size: 14px

#light_dark
  background: url(/yin_yang.png)
  background-size: $button_size
  display: inline-block
  width: $button_size
  height: $button_size
  vertical-align: text-top

#sidebar
  position: relative
  float: left
  width: $channels_width
  top: $header_height
  left: 0
  height: 100%
  display: -webkit-box
  display: -webkit-flex
  display: -ms-flexbox
  display: flex
  -webkit-box-orient: vertical
  -webkit-box-direction: normal
  -webkit-flex-direction: column
  -ms-flex-direction: column
  flex-direction: column
  border-right: 1px solid $color3

  ul
    list-style-type: none
    margin: 0
    padding: 10px
    border-top: 1px solid $color3

    a
      color: $color1
      text-decoration: none

    li.current
      a
        color: $color0
        padding-left: 1ex

#channels
  height: 100%
  overflow-y: auto

#calendar
  min-height: 140px

#options
  min-height: 65px

#clear_selection, #live_logging
  color: $color1
  &.active
    color: $color0

#options
  border-top: 1px solid $color3
  padding: 10px

  #search-box
    margin-top: 10px
    width: $channels_width - 20px

#calendar
  color: $color2
  padding: 10px

  .header
    color: $header_color

  .clock
    text-align: center
    color: $color0
    padding-bottom: 5px

  a
    text-decoration: none
    color: $color0

    &.current
      text-decoration: underline

#info
  padding: 10px
  margin: $header_height 0 0 ($channels_width + 1px)
  color: $color0

#log-panel
  border-bottom: 1px solid $color3
  margin: 0 0 5px 0
  padding: 0 0 5px 0

#log
  padding: 10px
  margin: $header_height 0 0 ($channels_width + 1px)
  color: $color1

  a.link
    color: $color1

  a.timestamp, a.timeref
    color: $color2 !important
    text-decoration: none

    &:hover
      text-decoration: underline

  .log-messages
    position: absolute
    top: 10px
    right: 10px
    bottom: 10px
    left: $channels_width + 10px
    overflow: auto

    &.with-panel
      top: 40px

#log:not(.highlight) div, div.highlight
  &.talk
    color: $color0

  &.me-tell
    color: $me_tell_color

  a.link
    color: $link_color !important

  @include nick-colors

#log.without-noise
  .op-join, .op-leave, .op-quit
    display: none !important

.pagination
  .current
    color: $color0
  a
    color: $color2

div.highlight
  color: $color0
